<!-- 查看 -->
<template>
  <view class="box">
    <Header title="复查"/>
    <view class="top-tab">
      <view v-for="(item, index) in tabData" :key="index" @click="checkTab(item.value)">
        <view class="label" :class="selectTab == item.value ? 'action' : 'noAction'">{{ item.name }}</view>
        <uv-line class="line" v-if="index != tabData.length - 1" color="#C0C4CC"
                 :length="tabData.length == 2? 230 : tabData.length == 3 ? 55 : 22"></uv-line>
      </view>
    </view>
    <view :style="{height: `calc(100vh - 44px - 66px - ${TopHeight.top}px)`,'overflow-y':'auto'}">
      <!-- 基本信息 -->
      <basicInformation v-if="selectTab == 0" :schoolId="law.schoolId" :canteenId="law.canteenId"></basicInformation>
      <!--检查信息 -->
      <view v-if="selectTab == 1">
        <checkTheInformation :lawItem="checkInformation" :law="law"></checkTheInformation>
      </view>
      <!-- 整改信息 -->
      <view v-if="selectTab == 2">
        <rectificationInformation :data="rectifyInformation" :entryType="law.entryType"/>
      </view>
      <!-- 复查信息 -->
      <view v-if="selectTab == 3">
        <reviewForm ref="reviewFormRef" :id="props.id"/>
        <reviewTheInformation v-if="reviewInformation.length>0" :data="reviewInformation" :reverseFlag="false"/>
      </view>
    </view>
  </view>
</template>
<script setup>
import basicInformation from '@/packageLawEnforcement/pages/viewInfo/basicInformation.vue';
import checkTheInformation from '@/packageLawEnforcement/pages/viewInfo/checkTheInformation.vue';
import rectificationInformation from '@/packageLawEnforcement/pages/viewInfo/rectificationInformation.vue';
import reviewTheInformation from '@/packageLawEnforcement/pages/viewInfo/reviewTheInformation.vue';
import reviewForm from '@/packageLawEnforcement/pages/review/reviewForm.vue';
import {reactive, ref, getCurrentInstance, defineProps} from "vue";
import TopHeight from "@/common/topHeight"
import {onLoad} from '@dcloudio/uni-app';
import api from "@/api/law/supLaw/supLaw";
let {proxy} = getCurrentInstance();
let tabData = ref([
  {name: '基本信息', value: 0},
  {name: '检查信息', value: 1},
  {name: '整改信息', value: 2},
  {name: '复查信息', value: 3}

]);
const props = defineProps({
    id: {
        type: String,
        default: "",
    },
});

let law = ref({});
// 检查信息
let checkInformation = ref({});
// 整改信息
let rectifyInformation = ref({});
// 复查信息
let reviewInformation = ref([]);
let selectTab = ref(3);
let getData = (id) => {
  proxy.http.get(api.getInfo(id)).then(res => {
    if (res.code === 0) {
      let data = res.data
      if (data.params.hasOwnProperty("10")) {
        law.value = data;
        if (data.params.hasOwnProperty("10")) {
          checkInformation.value = data.params["10"];
          // tabData.value.push({name: '检查信息', value: 1});
          selectTab.value = 1
        }
        if (data.params.hasOwnProperty("20")) {
          rectifyInformation.value = data.params["20"];
          // tabData.value.push({name: '整改信息', value: 2});
          selectTab.value = 2
        } else {
          // tabData.value.push({name: '整改信息', value: 2});
          selectTab.value = 2
        }
        if (data.params.hasOwnProperty("40")) {
          reviewInformation.value = data.params["40"];
          // console.log(reviewInformation.value)
          // tabData.value.push({name: '复查信息', value: 3});
          selectTab.value = 3
        }else{
          // tabData.value.push({name: '复查信息', value: 3});
          selectTab.value = 3
        }
      }
    }
  })}
onLoad((option) => {
  getData(option.id)
});
const reviewFormRef = ref("");
// tab选择
const checkTab = (e) => {
  // 复查页面信息存储到缓存里面
  if(selectTab.value == 3){
    reviewFormRef.value.setLocal();
  }
  selectTab.value = e
};
</script>

<style lang="scss" scoped>
@import "@/static/css/dailycheck/viewIndex.scss";

::v-deep.uv-textarea__field {
  text-align: left !important;
  padding: 6rpx 6rpx 45rpx !important;
}

::v-deep .speech-main {
  .content {
    .uv-textarea__field {
      text-align: left !important;
      height: 400px !important;
    }
    .uv-border {
      border: 0 !important;
    }
  }
}

.top-tab {
  display: flex;
  justify-content: space-around;
  line-height: 50rpx;

  & > view {
    display: flex;

    .label {
      margin-top: 30rpx;
      padding: 0 18rpx;
      font-size: 28rpx;
      color: #767676;

      &.action {
        color: #0256ff;
      }
    }
  }
}
</style>
